/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React from 'react';
import ProCard from '@ant-design/pro-card';
import { history, useModel } from 'umi';
import { Button, Col, Row, Typography } from 'antd';

const { Text } = Typography;

const AliappInfoHeader = () => {
  const { info } = useModel('mini_aliapp');
  const { app_name, auth_appid, mini_category = '--' } = info || {};

  return (
    <ProCard
      title={<Text strong>基本信息</Text>}
      extra={[
        <Button key='goBack' type='primary' onClick={() => history.goBack()}>
          返回上一页
        </Button>,
      ]}
      style={{
        borderBottom: '24px solid #eef0f3',
      }}
    >
      <Row gutter={[16, 16]} wrap>
        <Col span={12}>
          <Text strong>小程序名称：{app_name}</Text>
        </Col>
        <Col span={12}>
          <Text strong>appid: {auth_appid}</Text>
        </Col>
        <Col span={12}>
          <Text strong>类目：{mini_category}</Text>
        </Col>
      </Row>
    </ProCard>
  );
};

export default AliappInfoHeader;
